<!DOCTYPE html>
<html style="height: 100%"  xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增【请填写功能名称】')" />
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="width:48%; height: 70%;float: left">

</div>
<div style="width: 4%;height: 70%;float: left"></div>
<div id="container2" style="width:48%; height: 70%;float: left">

</div>
<div id="container3" style="width: 100%;height: 100%;float: left">

</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<th:block th:include="include :: footer" />
<script type="text/javascript">
    $(function () {
        /*获取项目实验个数*/
        $.ajax({
            url : ctx+"/system/onlineExperiment/getEchart3",
            type : 'get',
            success:function (data) {
                //console.log(data)
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                var data1 = genData(data.length);

                option = {
                    title: {
                        text: '项目包含实验个数统计',
                        //subtext: '纯属虚构',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: data1.legendData,

                        selected: data1.selected
                    },
                    series: [
                        {
                            name: '实验',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: data1.seriesData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                function genData(count) {
                    var legendData = [];
                    var seriesData = [];
                    var selected = {};
                    for (var i = 0; i < count; i++) {
                        legendData.push(data[i].experimentName);
                        seriesData.push({
                            name: data[i].experimentName,
                            value: data[i].countExperiment,
                        });
                        selected[data[i].experimentName] = i < 6;
                    }
                    return {
                        legendData: legendData,
                        seriesData: seriesData,
                        selected: selected
                    };
                }
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })

        /*获取专业的项目比重*/
        $.ajax({
            url : ctx+"/system/onlineExperiment/getEchart2",
            type : 'get',
            success:function (data) {
                //存放专业名称
                var array=new Array();
                for(var i=0;i<data.dataList.length;i++){
                    array.push(data.dataList[i].dictLabel)
                }
                var array1=new Array();
                //console.log(data.dataList[0].dictLabel)
                for(var j=0;j<data.dataList.length;j++){
                    array1.push({value:data.lists2[j],name:data.dataList[j].dictLabel});
                }
                var dom = document.getElementById("container2");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title:{
                        text:'专业的项目比重',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        top: 30,
                        data: array
                    },
                    series: [
                        {
                            name: '项目数量',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: array1
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })

        /**
         * 获取项目对应得参与人次
         */
        $.ajax({
            url : ctx+"/system/onlineExperiment/getEchart4",
            type : 'get',
            success:function (data) {
                //定义一个集合存储项目名
                var array=new Array();
                //定义一个集合存储参与人次
                var array1=new Array();
                //定义一个变量存储最大数量
                var max=0;
                for(var i=0;i<data.length;i++){
                    array.push(data[i].experimentName);
                    array1.push(data[i].personNumber);
                    if(data[i].personNumber>max){
                        max=data[i].personNumber;
                    }
                }
                var dom = document.getElementById("container3");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                var dataAxis = array;
                var data = array1;
                var yMax = max+5;
                var dataShadow = [];

                for (var i = 0; i < data.length; i++) {
                    dataShadow.push(yMax);
                }

                option = {
                    title: {
                        text: '项目参与人次',
                    },
                    xAxis: {
                        data: dataAxis,
                        axisLabel: {
                            inside: true,
                            rotate : 80,
                            textStyle: {
                                color: '#dc1814'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        { // For shadow
                            type: 'bar',
                            itemStyle: {
                                color: 'rgba(0,0,0,0.05)'
                            },
                            barGap: '-100%',
                            barCategoryGap: '40%',
                            data: dataShadow,
                            animation: false
                        },
                        {
                            type: 'bar',
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                            data: data
                        }
                    ]
                };

// Enable data zoom when user click bar.
                var zoomSize = 6;
                myChart.on('click', function (params) {
                    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                    myChart.dispatchAction({
                        type: 'dataZoom',
                        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
                        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
                    });
                });;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        })
    })

</script>
</body>
</html>